<template>
	<div id="findPayPw">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>找回支付密码</p>
		</div>
		<div v-if="payStep == 1" class="findPayPw_1">
			<div class="old_phone">
				<p><span>手机号：</span>{{encryptionPhone(Phone)}}</p>
			</div>
			<div class="verification">
				<input type="text" v-model="verification" placeholder="请输入验证码" />
				<input @click="getCode" v-show="verificationShow" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
			</div>
			<input class="sub" @click="next" type="button" value="下一步" />
		</div>
		<div v-else class="findPayPw_2">
			<input type="password" placeholder="请输入支付密码" v-model="newPassword" />
			<input type="password" placeholder="重复支付密码" v-model="again" />
			<input class="sub" @click="sub" type="button" value="确定" />
		</div>
	</div>
</template>

<script>
export default{
	name: 'findPayPw',
	data:function(){
		return{
			payStep: 1,//修改手机号步骤
			Phone: '',//手机号码
			verification: '',//验证码
			keycode: '',// 加密后的手机验证码
			getVerification: '60s后重新获取',//获取验证码
			verificationShow: true,//获取验证码切换
			newPassword: '',//新密码
			again: '',//重复密码
		}
	},
	methods:{
		//-------下一步---------
		next:function(){
			if(!this.keycode){
				this.$alert('请获取验证码');
			}else if(!this.verification){
				this.$alert('请输入验证码');
			}else{
				this.checkCode();
			}
		},
		//-------手机号加密----------
		encryptionPhone:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i<3||i>7){
					str2 += str1[i];
				}else{
					str2 += '*';
				}
			})
			return str2;
		},
		//--------获取验证码倒计时-------
		countDown:function(){
			var time = 60;
			var _this = this;
			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			var Time = setInterval(function(){
				if(time == 1){
					_this.verificationShow = true;
					time = 60;
					clearTimeout(Time);
				}else{
					time -- ;
					_this.getVerification = time + 's后重新获取';
				};
			},1000);
		},
		//--------获取用户绑定手机-------
		getUserInfo: function(){
			var _this = this;
			this.$axios.post("/user/info/getBaseInfo").then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	_this.Phone = data.result.phone;
			    }else{
			    	_this.$alert(data.result);
			    }
			}
			).catch(function (error) {
				console.log(error);
			});
		},
		//--------获取验证码-------
		getCode: function(){
			this.countDown();
			var _this = this;
			let postData = _this.$qs.stringify({
				phone: _this.Phone
			});
			_this.$axios.post("/sms/public/phoneCode", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.keycode = data.result;
					_this.$alert("发送成功");
				}else{
					_this.$alert("发送失败");
					console.log(data.result);
				} 
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------验证验证码-------
		checkCode: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				code: _this.verification,
				keyCode: _this.keycode
			});
			_this.$axios.post("/user/info/checkCode", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.payStep = 2;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//---------提交----------
		sub:function(){
			if(!this.newPassword){
				this.$alert('请输入新密码');
			}else if(!this.again){
				this.$alert('请再次输入密码');
			}else if(this.newPassword != this.again){
				this.$alert('两次输入的密码不一致');
			}else{
				this.resetPwd();
			}
		},
		//--------重置密码-------
		resetPwd: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				newPwd: _this.newPassword,
				rePwd: _this.again
			});
			_this.$axios.post("/user/info/resetPayPwd", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("密码重置成功");
					_this.$router.go(-1);
				}else{
					_this.$alert(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		}
	},
	created: function(){
		this.getUserInfo();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#findPayPw{
	height: 100%;
	padding-top: 5rem;
	box-sizing: border-box;
	background-color: #fff;
}
.findPayPw_1{
	width: 90%;
	margin: 0 auto;
}
.findPayPw_1 .old_phone{
	font-size: 1.2rem;
	color: #4F4F4F;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}
.findPayPw_1 .old_phone p span{
	margin-right: 0.5rem;
}
.findPayPw_1 .verification{
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}
.findPayPw_1 .verification input[type='text']{
	height: 3rem;
	width: 55%;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.findPayPw_1 .verification input[type='button']{
	height: 3rem;
	width: 40%;
	border: 1px solid #FF6565;
	color: #FF6565;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 1.2rem;
	border-radius: 0;
}
.sub{
	width: 100%;
	height: 3.6rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border: none;
	border-radius: 0;
	font-size: 1.2rem;
	margin-top: 1rem;
}
.findPayPw_2{
	width: 90%;
	margin: 0 auto;
}
.findPayPw_2 input[type='password']{
	width: 100%;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	height: 3rem;
	margin-bottom: 1rem;
}
</style>